<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>imageThinking</title>
		<link href="../../css/bootstrap.css" type="text/css" media="screen" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" id="site-theme" href="../../css/bootstrap-xadmin.css" />
		<link href="../../css/font-awesome.css" type="text/css" media="screen" rel="stylesheet" />
		<link href="../../css/xadmin.main.css" type="text/css" media="screen" rel="stylesheet" />
		<link href="../../css/xadmin.plugins.css" type="text/css" media="screen" rel="stylesheet" />
		<link href="../../css/xadmin.responsive.css" type="text/css" media="screen" rel="stylesheet" />
		<link href="../../css/xadmin.page.dashboard.css" type="text/css" media="screen" rel="stylesheet" />
		<script type="text/javascript" src="../../js/jquery.js"></script>
		<script type="text/javascript" src="../../js/echarts.common.min.js"></script>
		<style type="text/css">
			ul,li{
				list-style:none;
			}
			a{
				display: block;
				text-decoration:none !important;
			}
			a:hover, a:focus{
				color: #428bca;
			}
			.mian-width {
				width: 1200px;
				margin: 0 auto;
			}
			
			.top-search-form {
				margin-top: 14px;
			}
			
			.btn-login {
				border: 1px solid #fff;
				margin-right: 18px;
				padding: 5px 0 !important;
				text-align: center;
				color: #fff !important;
				width: 80px;
				font-size: 14px;
				display: inline-block;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				border-color: #dcdfe6;
				-webkit-appearance: none;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				outline: none;
				-webkit-transition: .1s;
				transition: .1s;
				font-weight: 500;
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				border-radius: 4px;
				margin-top: 14px;
			}
			.btn-login:hover{
				background-color: #fff !important;
				color: #525cdc !important;
			}
			.btn-register:hover{
				background-color: #757de3 !important;
				color: #fff !important;
			}
			.btn-register {
				background-color: #525cdc;
				border-color: #525cdc;
			}
			.auth-body-warp{
				display: none;
			}
			.auth-body {
				background-color: rgba(0, 0, 0, 0.8);
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1030;
				display: flex;
				align-items: center;
			}
			.body-middle {
				width: 100%;
				margin: 0 auto;
			}
			.body-middle form{
				display: flex;
				text-align: center;
				align-items: center;
			}
			.top-img {
				width: 100%;
				text-align: center;
				margin: 0 auto;
			}
			.panel-wrapper {
				width: 100%;
			}
			.panel {
				background-color: #fff;
				width: 440px;
				max-width: 100%;
				border: 1px solid #eee;
				border-radius: 10px;
				z-index: 100;
				padding: 30px 60px;
				margin: 20px auto;
			}
			.body-content{
				width: 1200px;
				margin: 75px auto 0;
			}
			.grabble{
				width: 100%;
				overflow: hidden;
			}
			.grabble-left{
				width: 80%;
				float: left;
				overflow: hidden;
			}
			.grabble .grabble-input{
				width: 100%;
				height: 40px;
				padding: 0;
				text-indent: 1em;
			}
			.grabble-rigth{
				width: 20%;
				float: left;
			}
			.grabble-button{
				display: inline-block;
				height: 40px;
				width: 100%;
				color:#fff;
				padding: 0;
				margin-left: 10px;
				text-align: center;
				line-height: 40px;
				font-size: 16px;
			}
			.show-module{
				width: 100%;
				overflow: hidden;
				margin-left: -50px;
			}
			.show-module li{
				width: 19%;
				float: left;
				border: 1px solid #ccc;
				font-size: 14px;
				padding: 10px 0px;
				margin-left: 10px;
				margin-top: 20px;
				text-align: center;
				cursor:pointer;
			}
			.content-middle-ul{
				width: 100%;
				margin-left: -6.6%;
			}
			.content-middle-ul li{
				float: left;
				width: 30%;
				border: 1px solid #ccc;
				text-align: center;
				margin-left: 3.3%;
				padding: 10px;
				cursor:pointer;
			}
			.margin-top0{
				margin-top: 0;
			}
			.content-middle-ul li img{
				width: 80%;
				margin: 20px auto;
			}
			.li-titel,.li-details-titel{
				font-weight: 600;
				font-size: 20px;
			}
			.li-heat{
				text-align: left;
				text-indent: 10%;
			}
			.ul-warp{
				display: none;
			}
			.ul-li-details{
				background-color: rgba(0,0,0,0.8);
				z-index: 1030;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
			}
			.ul-li-details ul{
				width: 60%;
				margin: 0 auto;				
				background-color: #fff;
				border-radius: 10px;
			}
			.ul-li-details ul li{
				width: 100%;
				padding: 20px 0px;
				overflow: hidden;
				margin-left: -1.8%;
			}
			.ul-li-details ul li .close{
				float: right;
				width: 30px;
				height: 30px;
			}
			.li-details-titel{
				text-align: center;
				margin-top: 50px;
			}
			.li-details-img{
				width: 100%;
				margin: 20px auto;
			}
			.close-img{
				float: right;
				width: 30px;
				height: 30px;
				margin-right: -45px;
				margin-top: -10px;
			}
		</style>
	</head>

	<body class="dashboard">
		<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
			<div class="mian-width">
				<div class="navbar-header">
					<a class="navbar-brand" href="index.html"><img src="../../images/icon.png" style="margin-right: 5px" /></a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav pull-right">
						<li class="dropdown g-theme">
							<a class="btn-login" href="javasrcipt:;" id="btnLogin">
								登录
							</a>

						</li>
						<li class="dropdown g-theme">
							<a class="btn-login btn-register" href="javasrcipt:;">
								注册
							</a>

						</li>

					</ul>



				</div>
			</div>
		</div>

		<!--<div id="footer">
			<hr/>
			<footer class="text-center">
				<p>&copy; Copyright 2018,ImageThinking</p>
			</footer>
		</div>-->
		<!--中间-->
		<div class="body-content">
			<div class="body-content-top">
				<div class="grabble">
					<div class="grabble-left">
						<input type="text" Placeholder="输入你要找的东西" class="grabble-input"/>
						
					</div>
					<div class="grabble-rigth">
						<a class="grabble-button btn-register">搜索</a>
					</div>
					<ul class="show-module" id="showModule">
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							<li>
								<a>第一模块</a>
							</li>
							
						</ul>
				</div>
			</div>
		</div>
		<hr />
		<div class="body-content margin-top0">
			<div class="body-content-middle">
				<ul class="content-middle-ul" id="list-ul">
					<li>
						<a href="index_details.html">
							<div class="li-titel">我是标题</div>
							<img src="../../images/logo.png"/>
							<div class="li-heat">热度，点赞数</div>
						</a>
					</li>
					<li>
						<a href="index_details.html">
							<div class="li-titel">我是标题</div>
							<img src="../../images/logo.png"/>
							<div class="li-heat">热度，点赞数</div>
						</a>
					</li>
					<li>
						<a href="index_details.html">
							<div class="li-titel">我是标题</div>
							<img src="../../images/logo.png"/>
							<div class="li-heat">热度，点赞数</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="ul-warp">
			<div class="ul-li-details">
				<ul>
					<li>
						<img src="../../images/colse2.png" class="close" id="liClose"/>
						<div class="li-details-titel">我是标题</div>
						<img src="../../images/1.jpeg" class="li-details-img"/>
						<div class="li-details-heat">热度，点赞数</div>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="auth-body-warp">
			<div class="auth-body">
				<div class="body-middle">
					<form action="" method="post" id="login-form">
						<div class="panel panel-default panel-single" id="panel-login">
							<img src="../../images/colse2.png" class="close-img" id="login-close"/>
							<input type='hidden' name='csrfmiddlewaretoken' value='agySyUF4evwylcfFpPLW10mZq9mxcXSHTFvhDWC8MFX4Jz5PstFnaspo1nskGfl0' />
	
							<div class="panel-heading">
	
								<p style="text-align: center;margin-top: 15px">
									<img src="../../images/logo.png" />
								</p>
	
							</div>
							<div class="panel-body">
	
								<div id="div_id_username" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
											<input class="form-control input-lg" id="id_username" maxlength="254" name="username" type="text" placeholder="用户名">
										</div>
	
									</div>
								</div>
	
								<div id="div_id_password" class="row">
									<div class="controls clearfix">
										<div class="input-group input-group-lg">
											<span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span>
											<input class="form-control input-lg" id="id_password" name="password" type="password" placeholder="密码">
										</div>
	
									</div>
								</div>
	
								<input type="hidden" name="this_is_the_login_form" value="1" />
								<input type="hidden" name="next" value="/admin/" />
	
								<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
	
								<div class="text-info" style="margin-top:15px;">
									<a href="javasrcipt:;"><i class="fa fa-question-sign"></i> 忘记了您的密码或用户名？</a>
								</div>
							</div>
	
						</div>
					</form>
				</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript" src="../../js/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../js/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../js/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../js/jquery.ui.sortable.js"></script>
	<script type="text/javascript" src="../../js/bootstrap.js"></script>
	<script type="text/javascript" src="../../js/xadmin.main.js"></script>
	<script type="text/javascript" src="../../js/xadmin.responsive.js"></script>
	<script type="text/javascript" src="../../js/jquery.ui.effect.js"></script>
	<script type="text/javascript" src="../../js/xadmin.plugin.themes.js"></script>
	<script type="text/javascript" src="../../js/xadmin.page.dashboard.js"></script>
	<script type="text/javascript" src="../../js/xadmin.plugin.portal.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#btnLogin").click(function(){
				$(".auth-body-warp").show();
			})
			
			$("#login-close").click(function(){
				$(".auth-body-warp").hide();
			})
			
//			$("#liClose").click(function(){
//				$(".ul-warp").hide();
//			})
//			
//			$("#list-ul li").click(function(){
//				$(".ul-warp").show();
//			})
			
			$("#showModule li").click(function(){
				$(this).css({
					border:"1px solid #428bca"
				});
			})

			setInterval(lazyload,1000);
		})
		var listUl = $("#list-ul li");
		function lazyload(){
		    var scrollTop = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop;
		    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
		    for(var i=0,len=listUl.length;i<len;i++){ var x = scrollTop + viewportSize - listUl[i].offsetTop; if(x>0){
		            listUl[i].src = listUl[i].getAttribute("loadpic");
		        }
		    }
		}
	</script>
</html>